<template>
	<div class="view">
		<Table highlight-row border stripe 
			:loading="data.loading" 
			:columns="columns" 
			:data="data.data">
		</Table>
	</div>
</template>

<script>
	import CWorksAttrItemView from '@/pages/works/view/CWorksAttrItemView.vue';
	
	export default {
		props: ['data'],
		components : {
			CWorksAttrItemView	
		},
		data() {
			return {
				columns : [
					{
						type: 'index',
						width: 60,
						fixed: 'left',
						align: 'center'
					},
					{
						title: '名称',
						key: 'name',
						width: 120,
						fixed: 'left',
						align: 'center'
					},
					{
						title: '是否有票房',
						key: 'hasBoxOffice',
						width: 100,
						align: 'center',
						render: (h, params) => {
							if(params.row.hasBoxOffice == 1) {
								return '有';
							} else {
								return '无';
							}
						}
					},
					{
						title: '是否有集数',
						key: 'hasEpisodes',
						width: 100,
						align: 'center',
						render: (h, params) => {
							if(params.row.hasEpisodes == 1) {
								return '有';
							} else {
								return '无';
							}
						}
					},
					{
						title: '是否有片长',
						key: 'hasDuration',
						width: 100,
						align: 'center',
						render: (h, params) => {
							if(params.row.hasDuration == 1) {
								return '有';
							} else {
								return '无';
							}
						}
					},
					{
						title: '背景颜色',
						key: 'bgColor',
						width: 100,
						align: 'center'
					},
					{
						title: '边框颜色',
						key: 'strokeColor',
						width: 100,
						align: 'center'
					},
					{
						title: '字体颜色',
						key: 'textColor',
						width: 100,
						align: 'center'
					},
					{
						title: '实例',
						key: 'textColor',
						fixed: 'right',
						width: 150,
						align: 'center',
						render : (h, params) => {
                            return h('div', [
                                h(CWorksAttrItemView, {
                                    props: {
                                        data: {
                                        		value : params.row.name,
                                        		textColor: params.row.textColor,
                                        		strokeColor: params.row.strokeColor,
                                        		bgColor: params.row.bgColor
                                        }
                                    }
                                })
                         	]);
                        }
					},
					{
						title: '状态',
						key: 'state',
						width: 80,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {
                            return params.row.state == 1 ? "正常" : "禁用";
                        }
					},
					{
						title: '操作',
						key: 'state',
						width: 180,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editItem(params)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: (params.row.state == 0 ? 'primary' : 'error'),
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editItem2State(params)
                                        }
                                    }
                                }, (params.row.state == 1 ? '禁用':'启用')),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteItem(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
					}
				]
			}
		},
		methods: {
			editItem(data) {
				this.$emit('on-action', 'editItem', data);
			},
			editItem2State(data) {
				this.$emit('on-action', 'editItem2State', data);
			},
			deleteItem(data) {
				this.$emit('on-action', 'deleteItem', data);
			}
		}
	}
</script>

<style scoped="scoped">
	
</style>